<template>
    <div class="box">
        <div class="header">

            <van-search v-model="value" placeholder="请输入搜索关键词" @click="$router.push('/search')" />
        </div>

        <div class="meddle">
            <div style="display: flex;">
                <van-sidebar v-model="active" @change="onChange">
                    <van-sidebar-item title="食品" />
                    <van-sidebar-item title="电器" />
                    <van-sidebar-item title="洗护" />
                    <van-sidebar-item title="女装" />
                    <van-sidebar-item title="手机" />
                </van-sidebar>

                <ul style="column-count: 2;">
                    <van-tabs v-model:active="active">
                        <van-tab title="为你推荐">
                            <li v-for="item in list" :key="item.id">
                                <van-image lazy-load :src="item.image" alt=""
                                    @click="$router.push('/lise/' + item.id)" />
                                <p>{{ item.title }}</p>
                            </li>
                        </van-tab>
                        <van-tab title="热门品牌">
                            <li v-for="item in list" :key="item.id">
                                <van-image lazy-load :src="item.image" alt=""
                                    @click="$router.push('/lise/' + item.id)" />
                                <p>{{ item.title }}</p>
                            </li>
                        </van-tab>
                        <van-tab title="T恤">
                            <li v-for="item in list" :key="item.id">
                                <van-image lazy-load :src="item.image" alt=""
                                    @click="$router.push('/lise/' + item.id)" />
                                <p>{{ item.title }}</p>
                            </li>
                        </van-tab>
                        <van-tab title="上装">
                            <li v-for="item in list" :key="item.id">
                                <van-image lazy-load :src="item.image" alt=""
                                    @click="$router.push('/lise/' + item.id)" />
                                <p>{{ item.title }}</p>
                            </li>
                        </van-tab>
                    </van-tabs>
                    <li v-for="item in list" :key="item.id">
                        <van-image lazy-load :src="item.image" alt="" @click="$router.push('/lise/' + item.id)" />
                        <p>{{ item.title }}</p>
                    </li>
                </ul>
            </div>

        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import request from '@/utils/request.js'
const active = ref(0)
const list = ref('')
const onChange = (index) => {
    const arr = ['食品', '电器', '洗护', '女装', '手机']
    request.get('/kind', {
        params: {
            key: arr[index]
        }
    }).then(res => {
        if (res.data.code == 200) {
            list.value = res.data.data
        }
    })
}
</script>